<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>翻书</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		html,
		body {
			height: 100%;
		}
		
		body {
			perspective: 1000px;
		}
		/*不能使用定宽居中 会导致后面的页面无法确定位置，重叠不起来*/
		
		.book {
			width: 300px;
			height: 300px;
			/*margin: 300px auto;*/
			position: absolute;
			top: 40%;
			left: 50%;
			background-color: salmon;
			transform: rotateX(30deg);
		}
		
		.preserve {
			/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，
			 * 还是在该元素所在的平面内被扁平化。*/
			transform-style: preserve-3d;
		}
		
		.outpage {
			/*transform-origin 设置变换元素的基点位置*/
			transform-origin: 0 50%;
		}
		/*设置宽高  位置  让所有的页面重叠*/
		
		.page {
			width: 300px;
			height: 300px;
			/*margin: 300px auto;*/
			position: absolute;
			top: 0;
			left: 0;
			border: 1px solid salmon;
		}
		
		.page1 .page{
			background-color: salmon;
		}
		
		@keyframes flip1 {
			0% {
				transform: rotateY(0deg);
			}
			50% {
				transform: rotateY(-170deg);
			}
			100% {
				transform: rotateY(0deg);
			}
		}
		.page1{
			animation: flip1 18s;
		}
		@keyframes flip2 {
			0% {
				transform: rotateY(0deg);
			}
			50% {
				transform: rotateY(-130deg);
			}
			100% {
				transform: rotateY(0deg);
			}
		}
		.page2{
			animation: flip2 14s 2s;
		}
		@keyframes flip3 {
			0% {
				transform: rotateY(0deg);
			}
			50% {
				transform: rotateY(-100deg);
			}
			100% {
				transform: rotateY(0deg);
			}
		}
		.page3{
			animation: flip3 10s 4s;
		}
		.page2 .page,
		.page3 .page,
		.page4 .page{
			background-color: wheat;
		}
		@keyframes flip4 {
			0% {
				transform: rotateY(0deg);
			}
			50% {
				transform: rotateY(-70deg);
			}
			100% {
				transform: rotateY(0deg);
			}
		}
		.page4{
			animation: flip4 6s 6s;
		}

		.page p{
			color: white;
			font-size: 20px;
			position: absolute;
			top: 60%;
			left: 60%;
		}
	</style>

	<body>

		<div class="book preserve">
			
			<div class="outpage page5 preserve">
				<div class="page">

				</div>
			</div>
			<div class="outpage page4 preserve">
				<div class="page">

				</div>
			</div>
			<div class="outpage page3 preserve">
				<div class="page">

				</div>
			</div>

			<div class="outpage page2 preserve">
				<div class="page">

				</div>
			</div>

			<div class="outpage page1 preserve">
				<div class="page">
					<p>
						书本翻页
					</p>
				</div>
			</div>

		</div>

	</body>

</html>